<template>
    <div class="pic_list">
        <ul>
            <li v-for="(item, index) in rawData[field]" :key="index" :offset="index > 0 ? 1 : 0">
                <el-row>
                    <el-col :span="16">
                    <div class="div-item">
                      <el-card v-if="index < rawData[field].length">
                              <label>步骤{{index+1}}</label>
                              <img src="~src/assets/img/E_head.png" class="image">
                              <div style="padding: 14px;">
                                  <span v-if="item.value_name !=null ">{{item.value_name}}</span>
                                  <span v-else>上级领导</span>
                                  <div>
                                      <!-- <time class="time">{{ field }}</time> -->
                                  </div>
                                  <el-button-group>
                                      <el-button type="primary" icon="el-icon-edit" @click="eidtCheck(index,item)"></el-button>
                                      <el-button type="primary" icon="el-icon-delete" @click="deleteCheck(index)"></el-button>
                                  </el-button-group>
                              </div>
                      </el-card>
                   </div>
                   </el-col>
                   <el-col v-if="index <rawData[field].length" :span="8" class="arrow">
                        <div >
                            <img src="~src/assets/img/E_line2.png" class="image">
                        </div>
                   </el-col>
                </el-row>
            </li>
            <li>
                <el-row>
                  <el-col :span="16">
                      <div class="div-item">
                        <el-card >
                          <label>添加审核人</label>
                          <img @click="addRole" src="~src/assets/img/E_add.png"  class="image-add">
                        </el-card>
                    </div>
                   </el-col>
                </el-row>
            </li>
        </ul>
    </div>
</template>


<script>
import { PopupName } from "src/consts/popup_const";
import { AuditTConst } from "src/consts/audit_template_const";
export default {
  data() {
    return {};
  },
  props: {
    rawData: Object,
    field: String
  },

  methods: {
    eidtCheck(index, val) {
      WLCommit(AuditTConst.CommitRoleType, "role_edit");
      var sendData = val;
      sendData.ind = index;
      WLCommit(AuditTConst.CommitSelectRole, sendData);
    },
    deleteCheck(index) {
      this.rawData[this.field].splice(index, 1);
    },
    addRole() {
      WLCommit(AuditTConst.CommitRoleType, "role_add");
      WLLib.panel(PopupName.AuditT_Role);
    }
  }
};
</script>
<style scoped>
.div-item {
  text-align: center;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.image {
  width: 100%;
  display: block;
}

.image-add {
  margin-top: 10px;
  width: 100%;
  display: block;
}

.arrow {
  margin-top: 90px;
}

.pic_list {
  display: block;
  white-space: nowrap;
  width: 700px;
  overflow: auto;
  text-align: left;
}

.pic_list li {
  width: 240px;
  height: 300px;
  /* margin: 3px; */
  display: inline-block;
}
</style>